<template>
    <div class="advertising_box" v-if="advertising_box">
        <a :href="ad.address" target="_blank">
            <slot name="img"></slot>
            <span class="advertising_title"><slot name="title">广告标题</slot></span>
        </a>

        <span class="shut_down" @click="advertising_box=false">关闭</span>
    </div>
</template>
<!--广告-->
<script setup>

//广告网站链接、背景图片
import {ref} from "vue";

//广告链接以及图片
const ad = defineProps({
    address: {
        type: String,
        default: "https://blog.lyzhnb.top/#/",
    },
    img: {
        type: String,
        default: "/img/home/t01b8d976a9f12bd368.jpg"
    },
})

//是否显示广告
const advertising_box = ref(true);
</script>

<style scoped>
.advertising_box {
    position: relative;
    width: 100%;
    max-width: 1150px;
    overflow: hidden;
    margin: auto;
    animation: advertising_box .5s ease-in 0s 1 forwards;
}

@keyframes advertising_box {
    0% {
        transform: scale(0);
    }
    30% {
        transform: scale(1.05);
    }
    50% {
        transform: scale(1);
    }
    70% {
        transform: scale(1.02);
    }
    100% {
        transform: scale(1);
    }
}

.advertising_box a img {
    width: 100%;
    height: 100px;
    animation: bigger 2s ease-in 1s infinite;
}

@keyframes bigger {
    0% {
        transform: scale(1);
    }
    70% {
        transform: scale(1.02);
    }
    100% {
        transform: scale(1);
    }
}

.shut_down {
    position: absolute;
    right: 0;
    top: 0;
    height: 20px;
    color: #ffffff;
    background: #606162;
    font-size: 15px;
    cursor: pointer;
}

.shut_down:hover {
    opacity: .8;
}

.advertising_title {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 20px;
    transform: translateY(-50%) translateX(-50%);
    color: white;
}

</style>